<template>
  <div id="days">
    <div class="day-title">最高在线数统计</div>
    <div id="bar-chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import { getDeviceOnlineStatistics } from "@/api/onlineStatistics/index.js";
import moment from 'moment';
export default {
  name: 'days',
  components: {},
  data() {
    return {
      activeName: '7',
      chart: null,
      data: [],
      xAxis: [],
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getList();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    handleClick() { },
    initChart(data) {
      let dom = echarts.init(document.getElementById('bar-chart'))
      var LegData = ['在线数', '设备总数'];
      var maxSerData = [];
      var minSerData = []
      var XaData = [];
      var XaAllData = []
      data.forEach(item => {
        maxSerData.push(item.maxOnline)
        minSerData.push(item.minOnline)
        XaData.push(item.time)
        XaAllData.push(item.total)
      })
      //数据参数

      var option = {
        // title: {
        //   textAlign: 'center',
        //   text: '最高在线数统计',
        //   x: '12%',
        //   y: '6%',
        //   textStyle: {
        //     fontSize: 16,
        //     fontWeight: 600,
        //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        //         offset: 0,
        //         color: '#DADEDE' // 0% 处的颜色
        //       }], false),
        //     padding: 5,
        //   },
        // },

        // tooltip: {
        //     trigger: "axis",
        // },
        grid: [
          {
            top: "30%",
            bottom: "10%",
          },
        ],
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'shadow'
        //     },
        // },
        legend: {
          icon: 'circle',
          data: LegData,
          right: '15%',
          top: '10%',
          textStyle: {
            color: 'rgba(255, 255, 255, 0.6)'
          }
        },
        xAxis: [{
          type: 'category',
          data: XaData,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // rotate: 45,
            textStyle: {
              color: 'rgba(255, 255, 255, 0.6)',
              fontSize: 12,
            },
          },
          axisLine: {
            show: false,
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            //show: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.14)' //里面横着的虚线
            }
          },
          axisTick: {
            show: false
          },
          // data: SerData,
          axisLabel: {
            textStyle: {
              color: 'rgba(255, 255, 255, 0.6)',
              fontSize: 12
            }
          },
          axisLine: {
            show: false,
          }
        }],
        series: [{
          name: LegData[0],
          type: 'bar',
          data: maxSerData,
          barWidth: '20px',
          itemStyle: {
            normal: {
              barBorderRadius: [50, 50, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#DADEDE' // 0% 处的颜色
              }], false)
            }
          },
          label: {
            normal: {
              show: true,
              formatter: '{c}',
              position: 'insideTop',
              textStyle: {
                color: 'rgba(0,0,0,.6)',
                fontSize: 12,
              }

            }
          }
        }, {
          name: LegData[1],
          type: 'bar',
          barGap: '-100%',
          barWidth: '20px',
          itemStyle: {
            color: 'rgba(0,0,0,0)',
            borderColor: '#2A71FD',
            padding: 0,
            normal: {
              barBorderRadius: [50, 50, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#839694' // 0% 处的颜色
              }], false)
            }
          },
          label: {
            normal: {
              show: true,
              lineHeight: 12,
              formatter: '{c}',
              position: 'top',
              right: 0,
              textStyle: {
                // fontWeight:'bold',
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 12
              }

            }
          },
          z: -10,
          data: XaAllData
        }],
        barCategoryGap: '40%'
      };
      dom.setOption(option)
    },
    getList() {
      let obj = {}
      obj.startTime = moment().subtract(7, 'days').format('x')
      obj.endTime = moment().format('x')
      getDeviceOnlineStatistics(obj).then((response) => {
        if (response.code == 200) {
          console.log(response)
          this.initChart(response.data)
        }
      });
    },
  },

}
</script>
<style lang='scss' scoped>
#days {
  position: relative;
  height: 100%;
}

.day-title {
  position: absolute;
  height: 60px;
  line-height: 60px;
  margin-left: 30px;
  background: linear-gradient(180deg, #eefaff 0%, #5c899f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-weight: 600;
}

#bar-chart {
  height: 100%;
}
</style>